<template>
  <div>
    <div id="app">
      <div class="title" >统计任务配置</div>
      <div class="form">
        <i-form :model="formItem" :label-width="120">
          <form-item label="统计任务名称：">
<!--            <i-row>-->
              <i-col span="6">
                <i-input v-model="formItem.name" placeholder="请输入"></i-input>
              </i-col>
<!--            </i-row>-->
          </form-item>
          <form-item label="统计任务编号：">
<!--            <i-row>-->
              <i-col span="5">
                <i-input v-model="formItem.number" placeholder="请输入"></i-input>
              </i-col>
<!--            </i-row>-->
          </form-item>
          <form-item label="选择脚本：">
            <i-row>
              <i-col span="3">
                <el-select v-model="formItem.script" placeholder="请选择" @change="scriptChange" >
                  <el-option :value="option.id" :key="option.id" :label="option.orgName" v-for="option in scriptList"></el-option>
                </el-select>
              </i-col>
            </i-row>
          </form-item>
          <form-item :label="detail.paramName"  v-for=" detail in  scriptListDetails">
            <i-row>
              <i-col span="3">
                <seinput v-model="jobScriptObject[detail.paramColumn]"></seinput>
              </i-col>
            </i-row>
          </form-item>
<!--          <form-item label="所属厂站过滤"  v-if="formItem.script?true:false" >-->
<!--            <i-row>-->
<!--              <i-col span="3">-->
<!--                <seselect v-model="selectObject"></seselect>-->
<!--              </i-col>-->
<!--            </i-row>-->
<!--          </form-item>-->
<!--          <form-item label="时间间隔">-->
<!--            <Row>-->
<!--              <Col span="3">-->
<!--                <timeselect v-model="timeVal"></timeselect>-->
<!--              </Col>-->
<!--            </Row>-->
<!--          </form-item>-->
        </i-form>
      </div>
      <cron ></cron>
    </div>
  </div>
</template>
<script>


module.exports =  {
  components:{
    cron:cronIndex,
    seinput:projiectInput,
    seselect:projiectSelect,
    timeselect:timeSelect

  },
  name: "my-taskConfiguration",
 data: function()  {
  return{
    textInput:"11111",
    formItem: {
      name: '',
      number: '',
      type: 'male',
      script: "",
      endTime: "",
      startTime: '',
      offsetTime: '',
      attribute: "",
      equipment: '',

    },
    timeVal:"00:00",
    // 选择z
    selectObject:{
      valueName:"111",
      equipmentList:[],
    },
    scriptList:[],
    scriptListDetails:[],
    jobScriptObject:{}
  }

  },
  mounted(){
    this.selectScriptList()
    this.getLocalStorage()


  },
  methods:{

    selectScriptList(){
      // 获取脚本下拉选择
      var that = this;
      $http.get({
        url:api.scriptList,
        data:{
        },
        success:(result,data)=>{
          if (data.code == "200")
            console.log(data)
            this.scriptList = data.rows
          }
      },that)


    },


    scriptChange(num){
      // 根据id获取
      var that = this;
      $http.get({
        url:api.scriptListDetails,
        data:{
          id:num,
        },
        success:(result,data)=>{
          if (data.code == "200"){
            this.scriptListDetails = data.data.scriptParamList
            // console.log(this.scriptListDetails)
          }
        }
      },that)
    },
    scriptAddInfo(id){
      var that = this;
      console.log(this.jobScriptObject)
      $http.post({
        url:api.scriptAddInfo,
        data:{
          jobGroup: "STATISTICS" , //任务分组，依据不同的定时任务该值随之变更
          jobType: 2,// 任务类型，依据不同的定时任务该值随之变更
          jobNum: this.formItem.number,
          jobName:this.formItem.name,
          invokeTarget: "1",
          cronExpression: id ,
          status: 0,
          jobScriptParam: JSON.stringify(this.jobScriptObject)
        },
        contentType:"json",
        success:(result,data)=>{

        },
        error:(err)=>{

        }
      },that)
    },
  },





}
</script>

<style scoped>
  .title{
    height: 50px;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
  }
  .form{
    margin-left:20px;
  }
  .no-authority{
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 50%;
  }
  .no-authority span{
    font-size: 20px;
  }
  .img-position{
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 17%;
    margin: 0 auto;
  }

  .ivu-page,
  .ivu-page-prev,
  .ivu-page-next,
  .ivu-select-selection,
  .ivu-select-dropdown,
  .ivu-page.mini .ivu-page-options-elevator input
  {
    background-color: #ffffff;
    color: #515a6e;
  }
  .page{
    display: flex;
    justify-content: center;
    -webkit-box-pack: center;
  }
  .ivu-page-item{
    background-color: #ffffff;
    border: 1px solid rgba(131, 125, 125, 0.5);
  }
  .ivu-page-item-active{
    background-color: white;
    border: 1px solid #409eff;
  }
  .ivu-page-item a{
    margin: 0 6px;
    text-decoration: none;
    color: #515a6e;
  }
  .ivu-page-next a, .ivu-page-prev a {
    font-size: 14px;
    color: #515a6e;
  }
  .ivu-spin-fix{
    background-color: rgba(131, 125, 125, 0.5);
  }
</style>